import React from "react";
import { Form, Input, Space, Button } from "antd";
import TheUpload from "@/components/TheUpload";
const { TextArea } = Input

export default class ForcedTakedown extends React.Component {
  state = {
    id: '',
    fileList: [],
    loading: false
  };
  componentDidMount() {
    this.setState({
      id: this.props.id,
      loading: this.props.loading
    })
  }
  getFileResult = (value) => {
    this.setState({ fileList: value })
    if (value && value.length) {
      let arr = value.map(v => {
        if (v.response && v.response.code === 0) {
          return v.response.data
        } else {
          return v.url
        }
      }).join(',')
      this.formRef.setFieldsValue({ images: arr })
    } else {
      this.formRef.setFieldsValue({ images: '' })
    }
  };
  render() {
    const { fileList, loading } = this.state
    return (
      <div>
        <div style={{ marginBottom: 20 }}>商品强制下架后，该商品将不能搜索且在APP端显示，商户将收到该商品的下架通知</div>
        <Form ref={ref => this.formRef = ref} onFinish={this.props.onFinish}>
          <Form.Item label='图片' name="images" extra={`(${fileList.length}/10)`}>
            <TheUpload
              isConversion={false}
              maxSize={10}
              getFileResult={this.getFileResult}
              len={10}
            />
          </Form.Item>
          <Form.Item label='说明' rules={[{ required: true, message: '请输入强制下架的原因及建议的整改措施' }]} name="explain">
            <TextArea rows={4} placeholder="请输入强制下架的原因及建议的整改措施" maxLength={500} showCount />
          </Form.Item>
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <Space>
              <Button onClick={this.props.handleCancel}>取消</Button>
              <Button loading={loading} type="primary" htmlType="submit">强制下架</Button>
            </Space>
          </div>
        </Form>
      </div>
    );
  }
}